<template>
  <van-nav-bar title="基本信息" left-arrow @click-left="$router.back()" />
  <div class="basic-info-container full-height">
    <div class="info-card">
      <div class="info-row">
        <span>{{ name }}</span>
        <span class="gender-icon" v-if="gender === '男'">♂</span>
        <span v-if="gender">{{ gender }}</span>
        <span v-if="age">{{ age }}岁</span>
        <span>bmi: -</span>
      </div>
      <div class="info-row">
        <span>身份证号：{{ maskedIdNumber }}</span>
      </div>
      <div class="info-row">
        <span>现住址：{{ address || '-' }}</span>
      </div>
      <span class="edit-btn" @click="onEdit">✎ 修改</span>
    </div>
    <div class="section-list">
      <div class="section-card active">
        <div class="section-title">现病史</div>
        <div class="section-detail">详情：无</div>
      </div>
      <div class="section-card add-btn">+ 添加疾病信息</div>
      <div class="section-card add-btn" @click="goSurgeryInfo">+ 添加手术信息</div>
      <div class="section-card add-btn" @click="goHistoryInfo">+ 添加既往史</div>
      <div class="section-card add-btn" @click="goAllergyInfo">+ 添加过敏史</div>
      <div class="section-card add-btn" @click="goPersonalHistory">+ 添加个人史</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { NavBar } from 'vant'

// 假设这些信息从注册页或store获取
const name = ref('羊羊羊')
const gender = ref('男')
const idNumber = ref('130123199001011234')
const address = ref('')

const router = useRouter()

// 身份证号脱敏
const maskedIdNumber = computed(() => {
  if (!idNumber.value || idNumber.value.length < 15) return idNumber.value
  // 6位+10星+4位
  return idNumber.value.slice(0, 3) + '**********' + idNumber.value.slice(-4)
})

// 通过身份证号计算年龄
function getAgeFromId(id: string): number | '' {
  if (!id || id.length < 15) return ''
  let birth = ''
  if (id.length === 18) {
    birth = id.substr(6, 8) // 19900101
  } else if (id.length === 15) {
    birth = '19' + id.substr(6, 6) // 199001
  }
  if (birth.length < 8) return ''
  const year = parseInt(birth.substr(0, 4))
  const month = parseInt(birth.substr(4, 2))
  const day = parseInt(birth.substr(6, 2))
  const today = new Date()
  let age = today.getFullYear() - year
  if (
    today.getMonth() + 1 < month ||
    (today.getMonth() + 1 === month && today.getDate() < day)
  ) {
    age--
  }
  return age
}
const age = computed(() => getAgeFromId(idNumber.value))

function onEdit() {
  router.push('/edit-basic-info')
}
function goSurgeryInfo() {
  router.push('/surgery-info')
}
function goHistoryInfo() {
  router.push('/history-info')
}
function goAllergyInfo() {
  router.push('/allergy-info')
}
function goPersonalHistory() {
  router.push('/personal-history')
}
</script>

<style scoped>
.basic-info-container.full-height {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f7f7fb;
  font-size: 34px !important;
}
.info-card {
  flex-shrink: 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(80,80,200,0.08);
  margin: 24px 16px 10px 16px;
  padding: 28px 20px 20px 20px;
  position: relative;
  font-size: 32px;
}
.info-row {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: 600;
}
.gender-icon {
  color: #1e90ff;
  font-size: 36px;
  margin-right: 4px;
}
.edit-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  color: #7b6ff2;
  font-size: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.section-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}
.section-card {
  background: #fff;
  border-radius: 18px;
  margin: 18px 16px 0 16px;
  padding: 38px 28px 28px 28px;
  font-size: 30px;
  box-shadow: 0 2px 12px rgba(80,80,200,0.08);
}
.section-card.active {
  background: linear-gradient(90deg, #e0fff7 0%, #fff 100%);
}
.section-title {
  font-weight: 700;
  margin-bottom: 18px;
  font-size: 34px;
}
.section-detail {
  color: #444;
  font-size: 30px;
}
.section-card.add-btn {
  background: linear-gradient(90deg, #ede7ff 0%, #fff 100%);
  color: #888;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  padding: 44px 0;
  margin-top: 32px;
  cursor: pointer;
}
</style> 